<template>
  <div style="margin-top: 55px;display: flex; gap: 10px; justify-content: center;">
    <el-date-picker
        v-model="time"
        type="month"
        value-format="YYYY-MM"
    />
    <el-button @click="billPeriod(time)" >月账单</el-button>
    <el-date-picker
        v-model="time"
        type="year"
        value-format="YYYY"
    />
    <el-button @click="billPeriod(time)" >年账单</el-button>
  </div>
  <el-table :data="billForMonth.categoryVOS" table-layout="auto"
            :default-sort="{ prop: 'amount', order: 'descending'}"
  >
    <el-table-column prop="category" label="类别" width="144" align="right"/>
    <el-table-column prop="percent" label="占消费百分比" width="144" align="right"/>
    <el-table-column prop="amount" label="总计" sortable width="89" align="right">
      <template v-slot="scope">
        {{ scope.row.amount.toFixed(2) }}
      </template>
    </el-table-column>
  </el-table>
  <p style=" font-size: 14px; width: 377px;text-align: right; margin: 0 auto;padding-right: 24px;
  color:#a59d91;">总消费：{{ total }}</p>
  <el-table :data="billForMonth.billVOS" table-layout="auto"
            :default-sort="{ prop: 'amount', order: 'descending' }">
    <el-table-column prop="time" label="使用时间" width="89" align="right"/>
    <el-table-column prop="purpose" label="用处" width="233" align="right"/>
    <el-table-column prop="category" label="类别" width="144" align="right"
                     :filters="[
        { text: '收入', value: '收入' },
        { text: '生活', value: '生活' },
        { text: '精神', value: '精神' },
        { text: '物质', value: '物质' },
        { text: '成本', value: '成本' },
      ]"
                     :filter-method="filterCategory"
    />
    <el-table-column prop="amount" sortable label="金额" width="89" align="right">
      <template v-slot="scope">
        {{ scope.row.amount.toFixed(2) }}
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import {inject, onMounted, ref} from "vue"
import axios from "axios"

const GLOBAL_CONSTANT = inject('GLOBAL_CONSTANT');

const time = ref()
const total = ref(0)

const billForMonth = ref({})
onMounted(() => {
  time.value = new URLSearchParams(location.search).get('month');
  billPeriod(time.value)
})

const billPeriod = (date) => {
  axios.get(GLOBAL_CONSTANT + "wolf/tally/month?date=" + date)
      .then((res) => {
        if (res.data.code === 610) {
          total.value = 0;
          billForMonth.value = res.data.data
          billForMonth.value.categoryVOS.forEach(item => {
            if (item.category !== "收入") {
              total.value += item.amount;
            }
          });
          total.value = total.value.toFixed(2)
        }
      })
}

const filterCategory = (value, row) => {
  return row.category === value;
}

</script>


<style scoped>

</style>